<template>
    <div id="temp">
        <div class="stuInfo">
            <div class="tit">
                <span>新项目详情</span>
                <span class="icon" @click="pop = true"></span>
            </div>
            <el-dialog title="" :visible.sync="pop" size="tiny">
                <el-form :model="ProjectDataForm" :label-width="width" :rules="projectRules" ref="projectRulesName">
                    <el-form-item label="项目编号" prop="number">
                        <el-col :span="span">
                            <el-input v-model="ProjectDataForm.number" size="small" placeholder="请输入项目编号"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="项目名称" prop="name">
                        <el-col :span="span">
                            <el-input v-model="ProjectDataForm.name" size="small" placeholder="请输入项目名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="设备">
                        <el-col :span="span">
                            <el-select v-model="ProjectDataForm.equipment" placeholder="请选择" size="small">
                                <el-option label="item" value="item">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="预期投入">
                        <el-col :span="span">
                            <el-input v-model="ProjectDataForm.invest" size="small" placeholder="请输入预期投入"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="研发周期">
                        <el-col :span="span">
                            <el-input v-model="ProjectDataForm.cycle" size="small" placeholder="请输入研发周期"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="截止日期">
                        <el-col :span="span">
                            <el-date-picker type="date" size="small" placeholder="选择日期"
                                            v-model="ProjectDataForm.deadline" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="EditProject">确 定</el-button>
                </div>
            </el-dialog>
            <el-row>
                <el-col :span="8">
                    <div>
                        <el-col :span="10">
                            <span class="left">项目编号：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{ProjectData.number}}</span>
                        </el-col>
                    </div>
                    <div>
                        <el-col :span="10">
                            <span class="left">设备：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{ProjectData.equipment}}</span>
                        </el-col>
                    </div>

                </el-col>
                <el-col :span="8">
                    <div>
                        <el-col :span="10">
                            <span class="left">项目名称：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{ProjectData.name}}</span>
                        </el-col>
                    </div>
                    <div>
                        <el-col :span="10">
                            <span class="left">预期投入：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{ProjectData.invest}}</span>
                        </el-col>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-col :span="10">
                            <span class="left">截止日期：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{ProjectData.deadline}}</span>
                        </el-col>
                    </div>
                    <div>
                        <el-col :span="10">
                            <span class="left">研发周期：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{ProjectData.cycle}}</span>
                        </el-col>
                    </div>
                </el-col>

            </el-row>
        </div>
        <div class="record">
            <el-tabs type="border-card" @tab-click="formChange">
                <el-tab-pane label="周工作量">
                    <table class="tab-table">
                        <thead>
                        <tr>
                            <th>
                                <span class="icon add" @click="OpenAdd('weekWork')"></span>
                            </th>
                            <th>序号</th>
                            <th>员工编号</th>
                            <th>姓名</th>
                            <th>周工作量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in list">
                            <td>
                                <span class="icon edit" @click="Edit('weekWork',item.id)"></span>
                                <span class="icon del" @click="Del('weekWork',item.id)"></span>
                            </td>
                            <td>{{index + 1}}</td>
                            <td>{{item.staff_num}}</td>
                            <td>{{item.staff_name}}</td>
                            <td>{{item.workload}}</td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="月工作量">
                    <table class="tab-table">
                        <thead>
                        <tr>
                            <th>
                                <span class="icon add" @click="OpenAdd('monthWork')"></span>
                            </th>
                            <th>序号</th>
                            <th>员工编号</th>
                            <th>姓名</th>
                            <th>月份</th>
                            <th>月工作量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in list" :key="item.id">
                            <td>
                                <span class="icon edit" @click="Edit('monthWork',item.id)"></span>
                                <span class="icon del" @click="Del('monthWork',item.id)"></span>
                            </td>
                            <td>{{index + 1}}</td>
                            <td>{{item.staff_num}}</td>
                            <td>{{item.staff_name}}</td>
                            <td>{{item.month}}</td>
                            <td>{{item.workload}}</td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="添加周工作量" :visible.sync="weekWorkPop" size="tiny">
            <el-form :model="weekWork" :label-width="width" :rules="weekWorkRules" ref="weekWorkRulesName">
                <el-form-item label="员工编号">
                    <el-col :span="span" prop="staff_num">
                        <el-input v-model="weekWork.staff_num" size="small"  disabled></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="姓名" prop="staff">
                    <el-col :span="span">
                        <el-select v-model="weekWork.staff" placeholder="请选择" @change="getId('weekWork')" filterable>
                            <el-option v-for="(item,index) in StaffList" :label="item.name" :value="item.id"
                                       :key="item.id"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="周工作量" prop="workload">
                    <el-col :span="span">
                        <el-input v-model="weekWork.workload" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="weekWorkPop = false">取 消</el-button>
                <el-button type="primary" @click="submit('weekWork')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="添加月工作量" :visible.sync="monthWorkPop" size="tiny">
            <el-form :model="monthWork" :label-width="width" :rules="monthWorkRules" ref="monthWorkRulesName">
                <el-form-item label="月份" prop="month" class="monthWork">
                    <el-col :span="span">
                        <el-date-picker v-model="monthWork.month" type="month" placeholder="选择月份" size="small"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="员工编号" prop="staff_num">
                    <el-col :span="span">
                        <el-input v-model="monthWork.staff_num" size="small" disabled></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="姓名" prop="staff">
                    <el-col :span="span">
                        <el-select v-model="monthWork.staff" placeholder="请选择" @change="getId('monthWork')"  size="small" filterable>
                            <el-option v-for="(item,index) in StaffList" :label="item.name" :value="item.id"
                                       :key="item.id"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="月工作量" prop="workload">
                    <el-col :span="span">
                        <el-input v-model="monthWork.workload" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="monthWorkPop = false">取 消</el-button>
                <el-button type="primary" @click="submit('monthWork')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import '../../assets/css/info.css'

    export default {
        data() {
            return {
                width: '200px',
                span: 15,
                pop: false,
                projectRules: {
                    number: [{required: true, message: "请输入项目编号", trigger: "blur"}],
                    name: [{required: true, message: "请输入项目名称", trigger: "blur"}]
                },
                weekWorkRules: {
                    staff: [{type: 'number',required: true, message: "请选择员工", trigger: "change"}],

                },

                monthWorkRules: {
                    staff: [{type: 'number',required: true, message: "请选择员工", trigger: "change"}],
                    month: [{type: 'date',required: true, message: "请选择月份", trigger: "change"}]
                },

                weekWorkPop: false,
                weekWork: {
                    staff_num: '',
                    staff: '',
                    workload: '',
                },

                monthWorkPop: false,
                monthWork: {
                    staff_num: '',
                    staff: '',
                    workload: '',
                    month: ''
                },
                ProjectDataForm: {
                    id: '',
                    number: '',
                    name: '',
                    invest: '',
                    equipment: '',
                    cycle: '',
                    deadline: '',
                },
                ProjectData: {},

                tabLabel: '周工作量',
                list: [],

                StaffList: [],

            }
        },

        created() {
            this.id = this.$route.params.id;
            this.getStaffLists()
            this.getProjectData()
            this.getweekWorklist()
        },

        methods: {
            getId(item) {
                this.StaffList.forEach(ele => {
                    if (this[item].staff == ele.id) {
                        this[item].staff_num = ele.number
                    }
                })
            },

            getProjectData() {
                let data = {id: this.id}
                this.apiPost('Train/projectDetail', data).then(res => {
                    this.ProjectData = res
                    for (let k in this.ProjectDataForm) {
                        this.ProjectDataForm[k] = res[k]
                    }

                })
            },

            getStaffLists() {
                this.apiPost('System/getStaffLists').then(res => {
                    this.StaffList = res
                })
            },

            EditProject() {
                this.pop = false
                let data = this.ProjectDataForm
                this.apiPost('Train/projectEdit', data).then(res => {
                    let remind = res.error ? 'error' : 'success';
                    _g.toastMsg(remind, res.msg);
                    if (!res.error) {
                        this.getProjectData()
                    } else {
                        this.pop = true
                    }
                })
            },

            formChange(item) {
                this.tabLabel = item.label
                if (this.tabLabel === '周工作量') {
                    this.getweekWorklist()
                } else {
                    this.getmonthWorklist()
                }
            },

            getweekWorklist() {
                let data = {id: this.id}
                this.apiPost('Train/weekWorkload', data).then(res => {
                    this.list = res
                })
            },

            getmonthWorklist() {
                let data = {id: this.id}
                this.apiPost('Train/monthWorkload', data).then(res => {
                    this.list = res
                })
            },

            OpenAdd(name) {
                this[name + 'Pop'] = true
                setTimeout(() => {
                    this.$refs[name + 'RulesName'].resetFields()
                    this[name] = {
                        staff_num: '',
                        staff: '',
                        workload: '',
                        month: ''
                    }
                }, 0)
            },

            submit(name) {
                this.$refs[name + 'RulesName'].validate((valid) => {
                    if (valid) {
                        let data = this[name]
                        data.pid = this.id
                        this[name + 'Pop'] = false
                        this.apiPost('Train/' + name + 'loadEdit', data).then(res => {
                            let remind = res.error ? 'error' : 'success';
                            _g.toastMsg(remind, res.msg)
                            if (!res.error) {
                                this['get' + name + 'list']()
                            } else {
                                this[name + 'Pop'] = true
                            }
                        })
                    } else {
                        return false
                    }
                })
            },

            Edit(name, id) {
                let data = {id: id}
                this.apiPost('Train/' + name + 'loadDetail', data).then((res) => {
                    this[name + 'Pop'] = true
                    setTimeout(() => {
                        this.$refs[name + 'RulesName'].resetFields()
                        setTimeout(() => {
                            if(res.month){
                                res.month = new Date(res.month.replace(/-/,"/"))
                            }
                            this[name] = res
                            
                        }, 0)
                    }, 0)
                })
            },

            Del(name, id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {id: id}
                    this.apiPost('Train/' + name + 'loadDelete', data).then((res) => {
                        if (!res.error) {
                            this.$message({
                                type: 'success',
                                message: res.msg
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                        this['get' + name + 'list']()
                    })
                }).catch(() => {
                    
                })
            }


        }
    }
</script>

<style scoped>

</style>
